<template>
  <div class="dressing">
    <div class="dressingchild">
      <div>
        <span style=" display: inline-block; width: 1rem;height: 1rem;
    position: absolute;
    top: 0.3rem;
    left: 0.5rem;" @touchstart="onClickRight(1)">
          <img class="derssimg" src="../../assets/img/desdel.png" />
        </span>
        <span class="dressingheader">职位筛选</span>
      </div>
      <div>
        <div class="dressingjubd">
          <p class="dressingtitel">地区</p>
        </div>
        <div class="dressingbtnp">
          <!-- <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="value in 6" :key="value" text="文字" />
          </van-grid>-->
          <button :class="item.dressingbtn" v-for="(item,index) in work_area" :key="index+'work_area'"
            @click="screening(work_area,index,0,item.code)">{{item.name}}</button>
        </div>
      </div>
      <div class="dressslider">
        <div class="dressingjubd" style="margin-left: -0.5rem;">
          <p class="dressingtitel">月薪范围</p>
        </div>
        <div class="dressingbtnp dressingbtnpyxfw">
          <span class="dressbxyx" v-show="dressbxyxshow">不限</span>
          <vue-slider ref="slider3" :tooltipFormatter="sidervalue.Formatter" v-model="sidervalue.value"
            :tooltip="'always'" :marks="[0, 100]" @change="change()">
            <template v-slot:dot="{ value, focus }">
              <div class="slibutton">
                <div class="slibuttonchi">
                  <span v-show="false">{{value}}{{focus}}</span>
                  <span class="slibuttonchild"></span>
                  <span class="slibuttonchild"></span>
                  <span class="slibuttonchild"></span>
                </div>
              </div>
            </template>
          </vue-slider>
        </div>
      </div>
      <div>
        <div class="dressingjubd">
          <p class="dressingtitel">学历</p>
        </div>
        <div class="dressingbtnp">
          <!-- <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="value in 6" :key="value" text="文字" />
          </van-grid>-->
          <button :class="item.dressingbtn" v-for="(item,index) in education" :key="index+'education'"
            @click="screening(education,index,2,item.val,1)">{{item.name}}</button>
        </div>
      </div>
      <div>
        <div class="dressingjubd">
          <p class="dressingtitel">发布时间</p>
        </div>
        <div class="dressingbtnp">
          <!-- <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="value in 6" :key="value" text="文字" />
          </van-grid>-->
          <button :class="item.dressingbtn" v-for="(item,index) in mobile_release_date"
            :key="index+'mobile_release_date'"
            @click="screening(mobile_release_date,index,3,item.val)">{{item.name}}</button>
        </div>
      </div>
      <div>
        <div class="dressingjubd">
          <p class="dressingtitel">工作经验</p>
        </div>
        <div class="dressingbtnp">
          <!-- <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="value in 6" :key="value" text="文字" />
          </van-grid>-->
          <button :class="item.dressingbtn" v-for="(item,index) in work_exp" :key="index+'work_exp'"
            @click="screening(work_exp,index,4,item.val,1)">{{item.name}}</button>
        </div>
      </div>
      <div>
        <div class="dressingjubd">
          <p class="dressingtitel">职位类别</p>
        </div>
        <div class="dressingbtnp">
          <!-- <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="value in 6" :key="value" text="文字" />
          </van-grid>-->
          <button :class="item.dressingbtn" v-for="(item,index) in category" :key="index+'category'"
            @click="screening(category,index,5,item.val,1)">{{item.name}}</button>
        </div>
      </div>
      <div>
        <div class="dressingjubd">
          <p class="dressingtitel">公司性质</p>
        </div>
        <div class="dressingbtnp">
          <!-- <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="value in 6" :key="value" text="文字" />
          </van-grid>-->
          <button :class="item.dressingbtn" v-for="(item,index) in us_company_nature" :key="index+'us_company_nature'"
            @click="screening(us_company_nature,index,6,item.val)">{{item.name}}</button>
        </div>
      </div>
      <div>
        <div class="dressingjubd">
          <p class="dressingtitel">企业规模</p>
        </div>
        <div class="dressingbtnp">
          <!-- <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="value in 6" :key="value" text="文字" />
          </van-grid>-->
          <button :class="item.dressingbtn" v-for="(item,index) in us_company_scale" :key="index+'us_company_scale'"
            @click="screening(us_company_scale,index,7,item.val)">{{item.name}}</button>
        </div>
      </div>
      <div class="jobbutton">
        <van-row>
          <van-col span="8">
            <button class="btnleft" @click="resetting(1)">重置</button>
          </van-col>
          <van-col span="16">
            <button class="btnright" @click="onClickRight(2)">确定</button>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
// import POSITIONLIST from '@/api/PositionList'
import DICTIONARY from '@/api/Dictionary'
import className from '@/assets/js/classname'
export default {
  data () {
    return {
      schoolname: '',
      dressbxyxshow: true,
      work_area: [], // 地区数据存放
      education: [], // 学历存储
      category: [], // 职位类别存储
      us_company_nature: [], // 公司性质存储
      us_company_scale: [], // 企业规模存储
      mobile_release_date: [
        {
          name: '全部',
          val: '',
          dressingbtn: ''
        },
        {
          name: '今天',
          val: 1
        },
        {
          name: '最近三天',
          val: 2
        },
        {
          name: '最近一周',
          val: 3
        },
        {
          name: '最近一个月',
          val: 4
        }
      ], // 发布时间存储
      work_exp: [], // 工作经验存储
      condition: [
        {
          column: 'work_area', // 地区
          type: 'like',
          value: ''
        },
        {
          column: 'max_wage', // 月薪范围
          type: 'ge',
          value: ''
        },
        {
          column: 'education', // 学历
          type: 'eq',
          value: ''
        },
        {
          column: 'mobile_release_date', // 发布时间
          type: '',
          value: ''
        },
        {
          column: 'work_exp', // 工作经验
          type: 'eq',
          value: ''
        },
        {
          column: 'nature', // 职位类别
          type: 'eq',
          value: ''
        },
        {
          column: 'us_company_nature', // 公司性质
          type: '',
          value: ''
        },
        {
          column: 'us_company_scale', // 公司规模
          type: '',
          value: ''
        },
        {
          column: 'max_wage', // 月薪范围
          type: 'le',
          value: ''
        },
        { column: 'status', type: 'eq', value: 1 }, // 不显示已下线
        { column: 'include', type: '', value: 'D,CN' }// 代表手机端请求
      ],
      sidervalue: {
        width: '100%',
        show: true,
        value: [1, 100],
        min: 1,
        max: 100,
        Formatter: '{value}k',
        piecewiseLabel: true,
        tooltip: 'always',
        tooltipDir: ['bottom', 'top']
        // marks: {
        //   "5000": {
        //     label: "单位k"
        //   }
        // }
      },
      diy_tooltip: '',
      diy_label: ''
    }
  },
  computed: {},
  methods: {
    // 筛选确认
    onClickRight (num) {
      // this.sidervalue.value.sort();
      if (this.dressbxyxshow) {
        this.condition[1].value = ''
        this.condition[8].value = ''
      } else {
        this.condition[1].value = this.sidervalue.value[0]
        this.condition[8].value = this.sidervalue.value[1]
        if (this.sidervalue.value[0] > this.sidervalue.value[2]) {
          this.condition[1].value = this.sidervalue.value[1] * 1000
          this.condition[8].value = this.sidervalue.value[0] * 1000
        } else {
          this.condition[1].value = this.sidervalue.value[0] * 1000
          this.condition[8].value = this.sidervalue.value[1] * 1000
        }
      }

      this.$emit('onClickRight', this.condition, num)
    },
    // 判断月薪范围
    change () {
      if (this.sidervalue.value[0] === 0 && this.sidervalue.value[1] === 100) {
        this.dressbxyxshow = true
      } else {
        this.dressbxyxshow = false
      }
      console.log(this.sidervalue.value, 'sidervalue')
    },
    // 字典获取
    adminDict () {
      let that = this
      let params =
        'area,work_exp,education,company_nature,allure,work_mode,scale'
      DICTIONARY.adminDict(params).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          // that.work_area = res.data.data.area
          that.education = res.data.data.education
          that.work_exp = res.data.data.work_exp
          that.category = res.data.data.work_mode
          that.us_company_nature = res.data.data.company_nature
          that.us_company_scale = res.data.data.scale
          // that.arrayunshift(that.work_area, 'work_area')
          that.arrayunshift(that.education, 'education')
          that.arrayunshift(that.work_exp)
          that.arrayunshift(that.category)
          that.arrayunshift(that.us_company_scale)
          that.arrayunshift(that.us_company_nature)
          // className(that.work_area, 0);
          // className(that.education, 0);
          // className(that.work_exp, 0);
          // className(that.category, 0);
          // className(that.us_company_nature, 0);
          // className(that.us_company_scale, 0);
          // that.resetting()
          that.prfindParent()
        }
      })
    },
    // 字典地区获取
    prfindParent () {
      let that = this

      DICTIONARY.prfindParent().then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          that.work_area = res.data.data

          that.arrayunshift(that.work_area, 'work_area')
          that.resetting()
        }
      })
    },
    // 添加不限
    arrayunshift (array, name) {
      if (name === 'work_area' || name === 'education') {
        if (name === 'work_area') {
          array.unshift({
            name: '不限',
            code: ''
          })
          array.push({
            name: '其他地区',
            code: '666666'
          })
        } else {
          array.unshift({
            name: '不限',
            val: ''
          })
        }
      } else {
        array.unshift({
          name: '全部',
          val: ''
        })
      }
    },
    // 更改css样式和绑定数据
    screening (array, index, num, val, arrayname) {
      className(array, index)
      if (arrayname !== 1) {
        this.condition[num].value = val.toString()
      } else {
        if (val === '') {
          this.condition[num].value = val
        } else {
          this.condition[num].value = Number(val)
        }
      }
      console.log(this.sidervalue.value.sort())
      console.log(this.sidervalue.value.sort()[0])
      // console.log(typeof this.condition[2].value);
      console.log(val, 'val')
      this.$forceUpdate()
    },

    // 重置筛选
    resetting (num) {
      className(this.work_area, 0)
      className(this.education, 0)
      className(this.mobile_release_date, 0)
      className(this.work_exp, 0)
      className(this.category, 0)
      className(this.us_company_nature, 0)
      className(this.us_company_scale, 0)
      if (num === 1) {
        this.condition.map(item => {
          if (item.column !== 'status' && item.column !== 'include') {
            console.log(item.column)
            item.value = ''
          }
          this.sidervalue.value = [0, 100]
          this.dressbxyxshow = true
        })
      }

      this.$forceUpdate()
    }
  },
  created () {
    className(this.mobile_release_date, 0)
    this.adminDict()
  }
}
</script>
<style scoped></style>
